<template>
  <div class="header">
    <header>
      <div class="logo-box">
        <a>
          <img src="../../assets/logo.png" alt="首页" />
        </a>
        <div class="tel-box">
          <router-link to="/Login" class="tel">会员登录</router-link>
          <div class="tel-img">
            <img src="../../assets/code.png" />
          </div>
        </div>
      </div>
      <nav>
        <ul>
          <li>
            <router-link to="/" class="tel" title="首页"
              ><span>首页</span></router-link
            >
          </li>
          <li
            class="hosub-box hosub-box1"
            @mouseenter="mouseenter"
            @mouseleave="mouseleave"
          >
            <router-link to="#" class="tel" title="关于协会"
              ><span>关于协会</span></router-link
            >

            <div class="sub-box sub-box1" v-show="hover1">
              <div style="position: relative">
                <img
                  style="position: absolute; top: -12px"
                  src="../../assets/upimg.png"
                  alt=""
                />
                <div class="tab-cont">
                  <router-link to="/Synopsis">协会简介</router-link>
                  <router-link to="/Solution">协会章程</router-link>
                </div>
              </div>
            </div>
          </li>
          <li
            class="hosub-box hosub-box2"
            @mouseenter="mouseenter1"
            @mouseleave="mouseleave1"
          >
            <router-link to="#" class="tel" title="资讯中心"
              ><span>资讯中心</span></router-link
            >

            <div class="sub-box sub-box2" v-show="hover2">
              <div style="position: relative">
                <img
                  style="position: absolute; top: -12px"
                  src="../../assets/upimg.png"
                  alt=""
                />

                <div class="tab-cont">
                  <router-link to="/Industry">行业动态</router-link>
                  <router-link to="/Association">协会动态</router-link>
                  <router-link to="/Member">会员动态</router-link>
                  <router-link to="/Policy">政策法规</router-link>
                </div>
              </div>
            </div>
          </li>
          <li>
            <router-link to="/Directory" class="tel" title="会员名录"
              ><span>会员名录</span></router-link
            >
          </li>
          <li
            class="hosub-box hosub-box3"
            @mouseenter="mouseenter2"
            @mouseleave="mouseleave2"
          >
            <router-link to="#" class="tel" title="会员服务"
              ><span>会员服务</span></router-link
            >

            <div class="sub-box sub-box3" v-show="hover3">
              <div style="position: relative">
                <img
                  style="position: absolute; top: -12px"
                  src="../../assets/upimg.png"
                  alt=""
                />

                <div class="tab-cont">
                  <router-link to="/ApplicationMember">会员申请</router-link>
                  <router-link to="/ResourceDonwload">资料下载</router-link>
                  <router-link to="#">培训服务</router-link>
                </div>
              </div>
            </div>
          </li>
          <li>
            <router-link to="/AssociationNotice" class="tel" title="协会公告"
              ><span>协会公告</span></router-link
            >
          </li>
          <li>
            <router-link to="/ParkingGarden" class="tel" title="党建园地"
              ><span>党建园地</span></router-link
            >
          </li>
        </ul>
      </nav>
    </header>
  </div>
</template>
<script>
export default {
  name: "HomeHeader",
  data() {
    return {
      hover1: false,
      hover2: false,
      hover3: false,
    };
  },
  mounted() {},
  methods: {
    mouseenter() {
      console.log("鼠标悬停了");
      this.hover1 = true;
    },
    mouseleave() {
      this.hover1 = false;
    },
    mouseenter1() {
      console.log("鼠标悬停了");
      this.hover2 = true;
    },
    mouseleave1() {
      this.hover2 = false;
    },
    mouseenter2() {
      console.log("鼠标悬停了");
      this.hover3 = true;
    },
    mouseleave2() {
      this.hover3 = false;
    },
  },
  computed: {},
};
</script>
<style  scoped>
@import url("../../assets/css/global.css");
@import url("../../assets/css/common.css");
</style>